<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/4/2
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>签到设置</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadData()">

<br>
<form class="form-horizontal">

   <%-- <div class="form-group">
       &lt;%&ndash; <label class="col-md-2" align="right">id：</label>
        <div class="col-md-2">
            <input type="text" id="sysId" class="form-control">
        </div>&ndash;%&gt;
        &lt;%&ndash;<label class="col-md-2" align="right">用户名：</label>
        <div class="col-md-2">
            <input type="text" id="name" class="form-control">
        </div>&ndash;%&gt;
        <input type="button" class="btn btn-success btn-sm" onclick="loadData()" value="查询">
    </div>--%>
</form>
<table class="table">
    <thead>
    <th>id列</th>
    <th>签到时间</th>
    <th>签退时间</th>
    <th>出差/请假最大次数</th>
    <th>迟到/早退最大次数</th>
    <th>操作</th>
    </thead>
    <tbody id="tb">

    </tbody>
</table>

<%--模态框--%>

<div class="modal fade" id="one" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header" style="background-color: green; height: 20px;">
            </div>
            <div class="modal-body">
                <table class="table" border="0">


                    <tr>
                        <td>签到时间</td>
                        <td><input type="text" id="sId" readonly></td>
                    </tr>
                    <tr>
                        <td>签到时间</td>
                        <td><input type="text" id="openOffice"></td>
                    </tr>

                    <tr>
                        <td>签退时间</td>
                        <td><input type="text" id="endOffice"></td>
                    </tr>
                    <tr>
                        <td>出差/请假最大次数</td>
                        <td><input type="text" id="leave"></td>
                    </tr>
                    <tr>
                        <td>迟到/早退最大次数</td>
                        <td><input type="text" id="absenteeism"></td>
                    </tr>
                    <tr>
                        <td><span style="color:red" id="info"></span></td>
                        <td colspan="2">
                            <button type="button" onclick="update()" class="btn btn-success btn-sm">修改</button>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
    </div>
</div>

</body>
<script>

    //加载数据
    function loadData() {

        $.ajax({
            url :"${pageContext.request.contextPath}/set/select2",
            type:"get",
            dataType:"json",
            success:function (data) {
                console.log(data);
                console.log(typeof(data.info));
                if(typeof(data.info)=='string'){
                    alert(data.info);
                    //清空
                    $("#tb").html(data.info);
                }else{

                    var html = "";
                    for(var i=0;i<data.info.length;i++){
                        html += "<tr>" +
                            "<td>"+data.info[i].sId+"</td>" +
                            "<td>"+data.info[i].openOffice+"</td>" +
                            "<td>"+data.info[i].endOffice+"</td>" +
                            "<td>"+data.info[i].leave+"</td>" +
                            "<td>"+data.info[i].absenteeism+"</td>" +
                            "<td>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePageWindow(this)'>弹窗修改</button>" +
                            "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }


            }
        })
    }

    //打开修改弹窗
    function updatePageWindow(obj) {

        //显示弹窗
        $("#one").modal("show");

        //清空提示信息
        $("#info").text("");

        var sId = $(obj).parent().parent().find("td").eq(0).text();
        $("#sId").val(sId);
        //console.log($(obj).parent().parent().find("td").eq(0).text());
        var openOffice = $(obj).parent().parent().find("td").eq(1).text();
        $("#openOffice").val(openOffice);
        //console.log($(obj).parent().parent().find("td").eq(1).text());
        var endOffice = $(obj).parent().parent().find("td").eq(2).text();
        $("#endOffice").val(endOffice);

        var leave = $(obj).parent().parent().find("td").eq(3).text();
        $("#leave").val(leave);
        //console.log( $("#leave").val(leave));
        var absenteeism = $(obj).parent().parent().find("td").eq(4).text();
        $("#absenteeism").val(absenteeism);
    }


    //修改
    function update() {
        var sId =$("#sId").val();
        var openOffice =$("#openOffice").val();
        var endOffice =$("#endOffice").val();
        var leave =$("#leave").val();
        var absenteeism =$("#absenteeism").val();

            //ajax请求
            $.ajax({
                url :"${pageContext.request.contextPath}/set/update1",
                type:"get",
                data:{"sId":sId,"openOffice":openOffice,"endOffice":endOffice,"leave":leave,"absenteeism":absenteeism},
                contentType: "application/x-www-form-urlencoded",
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    //alert(data.info);
                    $("#info").text(data.info);
                    if(data.info=="修改成功"){
                        //关闭弹窗
                        $("#one").modal("hide");
                        //刷新
                        loadData();
                    }

                }
            })
    }
</script>
</html>
